<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.form.basicDemo.d-form-item-title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.form.basicDemo.d-form-item-description' | translate }}</div>
  </div>
  <div class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.form.basicDemo.d-form-label-title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.form.basicDemo.d-form-label-description' | translate }}</div>
  </div>
  <div class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.form.basicDemo.d-form-control-title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.form.basicDemo.d-form-control-description' | translate }}</div>
  </div>
  <div class="devui-demo-example">
    <div class="devui-demo-title">{{ 'components.form.basicDemo.d-form-operation-title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.form.basicDemo.d-form-operation-description' | translate }}</div>
  </div>

  <div class="devui-demo-example" [dAnchor]="'basic-usage'">
    <div class="devui-demo-title">{{ 'components.form.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.form.basicDemo.description' | translate }}</div>
    <d-codebox id="form-base" [sourceData]="BasicSource">
      <d-form-demo-base demo></d-form-demo-base>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'demo-label-horizontal'">
    <div class="devui-demo-title">{{ 'components.form.labelHorizontalDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.form.labelHorizontalDemo.description' | translate }}</div>
    <d-codebox id="form-label-horizontal" [sourceData]="LabelHorizontalSource">
      <d-form-demo-label-horizontal demo></d-form-demo-label-horizontal>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'demo-modal'">
    <div class="devui-demo-title">{{ 'components.form.modalDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.form.modalDemo.description' | translate }}
    </div>
    <d-codebox id="form-modal" [sourceData]="ModalSource">
      <d-form-demo-modal demo></d-form-demo-modal>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-multi-col'">
    <div class="devui-demo-title">{{ 'components.form.multiColDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.form.multiColDemo.description' | translate }}</div>
    <d-codebox id="form-multi-col" [sourceData]="MultiColSource">
      <d-form-demo-multi-col demo></d-form-demo-multi-col>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-inner-validator'">
    <div class="devui-demo-title">{{ 'components.form.innerValidatorDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.form.innerValidatorDemo.subtitle' | translate }}</div>
    <div [innerHTML]="'components.form.innerValidatorDemo.description' | translate"></div>
    <d-codebox id="inner-validator" [sourceData]="InnerValidatorSource">
      <d-form-demo-inner-validator demo></d-form-demo-inner-validator>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-custom-validator'">
    <div class="devui-demo-title">{{ 'components.form.customerValidatorDemo.title' | translate }}</div>
    <div [innerHTML]="'components.form.customerValidatorDemo.description' | translate"></div>
    <d-codebox id="custom-validator" [sourceData]="CustomValidatorSource">
      <d-form-demo-custom-validator demo></d-form-demo-custom-validator>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-error-strategy'">
    <div class="devui-demo-title">{{ 'components.form.customErrorStrategyDemo.title' | translate }}</div>
    <div [innerHTML]="'components.form.customErrorStrategyDemo.description' | translate"></div>
    <d-codebox id="error-strategy" [sourceData]="ErrorStrategySource">
      <d-form-demo-error-strategy demo></d-form-demo-error-strategy>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-custom-message'">
    <div class="devui-demo-title">{{ 'components.form.customMessageShowDemo.title' | translate }}</div>
    <div [innerHTML]="'components.form.customMessageShowDemo.description' | translate"></div>
    <d-codebox id="custom-message-show" [sourceData]="CustomMessageShowSource">
      <d-form-demo-custom-message-show demo></d-form-demo-custom-message-show>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-debounce-time'">
    <div class="devui-demo-title">{{ 'components.form.debounceTimeDemo.title' | translate }}</div>
    <div [innerHTML]="'components.form.debounceTimeDemo.description' | translate"></div>
    <d-codebox id="debounce-time" [sourceData]="DebounceTimeSource">
      <d-form-demo-debounce-time demo></d-form-demo-debounce-time>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-validate-template'">
    <div class="devui-demo-title">{{ 'components.form.validateTemplateForm.title' | translate }}</div>
    <div [innerHTML]="'components.form.validateTemplateForm.description' | translate"></div>
    <d-codebox id="validate-template-form" [sourceData]="ValidateTemplateForm">
      <d-form-demo-validate-template-form demo></d-form-demo-validate-template-form>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-user-register'">
    <div class="devui-demo-title">{{ 'components.form.userRegisterDemo.title' | translate }}</div>
    <div [innerHTML]="'components.form.userRegisterDemo.description' | translate"></div>
    <d-codebox id="user-register" [sourceData]="UserRegisterShowSource">
      <d-form-demo-user-register demo></d-form-demo-user-register>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-validate-reactive'">
    <div class="devui-demo-title">{{ 'components.form.validateReactiveDemo.title' | translate }}</div>
    <div class="devui-demo-text" [innerHTML]="'components.form.validateReactiveDemo.description' | translate"></div>
    <d-codebox id="form-validate-reactive" [sourceData]="ValidateReactiveSource">
      <d-form-demo-validate-reactive demo></d-form-demo-validate-reactive>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-custom-status'">
    <div class="devui-demo-title">{{ 'components.form.customStatusDemo.title' | translate }}</div>
    <div class="devui-demo-text" [innerHTML]="'components.form.customStatusDemo.description' | translate"></div>
    <d-codebox id="form-custom-status" [sourceData]="ValidateCustomStatus">
      <d-form-custom-status demo></d-form-custom-status>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-validate-sync'">
    <div class="devui-demo-title">{{ 'components.form.validateSyncDemo.title' | translate }}</div>
    <div class="devui-demo-text" [innerHTML]="'components.form.validateSyncDemo.description' | translate"></div>
    <div id="demo-validate-sync">
      <d-codebox [sourceData]="ValidateSyncSource">
        <d-form-demo-validate-sync demo></d-form-demo-validate-sync>
      </d-codebox>
    </div>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-validate-cross-component'">
    <div class="devui-demo-title">{{ 'components.form.validateCrossComponentDemo.title' | translate }}</div>
    <div class="devui-demo-text" [innerHTML]="'components.form.validateCrossComponentDemo.description' | translate"></div>
    <div id="demo-validate-cross-component">
      <h5>{{ 'components.form.reactiveCrossComponent.title' | translate }}</h5>
      <d-codebox [sourceData]="ReactiveFormCrossComponent">
        <d-form-demo-validate-cross-component demo></d-form-demo-validate-cross-component>
      </d-codebox>
      <h5>{{ 'components.form.templateCrossComponent.title' | translate }}</h5>
      <d-codebox [sourceData]="ValidateTemplateCrossComponent">
        <d-form-demo-template-cross-component demo></d-form-demo-template-cross-component>
      </d-codebox>
    </div>
  </div>

  <div class="devui-demo-example" [dAnchor]="'demo-validate-update'">
    <div class="devui-demo-title">{{ 'components.form.validateUpdate.title' | translate }}</div>
    <div class="devui-demo-text" [innerHTML]="'components.form.validateUpdate.description' | translate"></div>
    <div id="demo-validate-update">
      <d-codebox [sourceData]="ValidateUpdate">
        <d-form-demo-validate-update demo></d-form-demo-validate-update>
      </d-codebox>
    </div>
  </div>
</div>
